<template>
  <div class="membership-upgrade">
    <h1 class="page-title">开通会员享特权</h1>
    
    <div class="upgrade-content">
      <!-- 会员权益选择 -->
      <div class="benefits-section">
        <MemberBenefits 
          :title="'选择适合您的会员方案'" 
          :gold-price="19.9" 
          :platinum-price="39.9" 
          :diamond-price="89.9"
          @plan-selected="handlePlanSelected"
          @proceed="handleProceedToPayment"
        />
      </div>
      
      <!-- 会员特权详情 -->
      <div class="features-section">
        <MemberFeatures :title="'会员特权详情'" />
      </div>
      
      <!-- 会员支付模块 (条件显示) -->
      <div class="payment-section" v-if="showPayment">
        <MemberPayment 
          :title="'会员支付'" 
          :membership-level="selectedPlan.level" 
          :price="selectedPlan.price"
          @payment-success="handlePaymentSuccess"
          @payment-failed="handlePaymentFailed"
        />
        <button class="back-btn" @click="showPayment = false">返回选择方案</button>
      </div>
      
      <!-- 支付成功弹窗 -->
      <div class="success-modal" v-if="paymentSuccess">
        <div class="modal-content">
          <div class="success-icon">
            <svg width="60" height="60" viewBox="0 0 24 24" fill="none">
              <circle cx="12" cy="12" r="10" fill="#4caf50"/>
              <path d="M9 16.17L4.83 12L3.41 13.41L9 19L21 7L19.59 5.59L9 16.17Z" fill="white"/>
            </svg>
          </div>
          <h2>支付成功！</h2>
          <p>恭喜您成为{{ getLevelName(successPlan.level) }}，您的会员权益已立即生效！</p>
          <div class="success-info">
            <p>会员有效期：{{ formatDate(successPlan.expiryDate) }}</p>
            <p>获得积分奖励：100积分</p>
          </div>
          <div class="modal-actions">
            <button class="primary-btn" @click="goToMembershipCenter">
              前往会员中心
            </button>
            <button class="secondary-btn" @click="continueToHome">
              返回首页
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import MemberBenefits from '../components/MemberBenefits.vue';
import MemberFeatures from '../components/MemberFeatures.vue';
import MemberPayment from '../components/MemberPayment.vue';

const router = useRouter();

const showPayment = ref(false);
const paymentSuccess = ref(false);
const selectedPlan = ref({ level: 0, price: 0 });
const successPlan = ref({ level: 0, expiryDate: '' });

// 处理方案选择
const handlePlanSelected = (level) => {
  let price = 0;
  switch(level) {
    case 1:
      price = 19.9;
      break;
    case 2:
      price = 39.9;
      break;
    case 3:
      price = 89.9;
      break;
  }
  selectedPlan.value = { level, price };
};

// 处理继续支付
const handleProceedToPayment = (plan) => {
  selectedPlan.value = plan;
  showPayment.value = true;
  // 滚动到支付模块
  setTimeout(() => {
    const paymentSection = document.querySelector('.payment-section');
    if (paymentSection) {
      paymentSection.scrollIntoView({ behavior: 'smooth' });
    }
  }, 100);
};

// 处理支付成功
const handlePaymentSuccess = (result) => {
  showPayment.value = false;
  successPlan.value = result;
  paymentSuccess.value = true;
};

// 处理支付失败
const handlePaymentFailed = () => {
  alert('支付失败，请重试');
};

// 前往会员中心
const goToMembershipCenter = () => {
  router.push('/membership/center');
};

// 返回首页
const continueToHome = () => {
  router.push('/home');
};

// 获取等级名称
const getLevelName = (level) => {
  switch(level) {
    case 1: return '黄金会员';
    case 2: return '铂金会员';
    case 3: return '钻石会员';
    default: return '普通用户';
  }
};

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN');
};
</script>

<style scoped>
.membership-upgrade {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-title {
  text-align: center;
  margin-bottom: 40px;
  color: #333;
  font-size: 32px;
}

.upgrade-content {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.benefits-section,
.features-section {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.payment-section {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-top: 40px;
}

.back-btn {
  display: block;
  margin: 20px auto 0;
  background: #f5f5f5;
  color: #666;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.back-btn:hover {
  background: #e0e0e0;
}

/* 成功弹窗 */
.success-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-content {
  background: white;
  border-radius: 12px;
  padding: 40px;
  max-width: 500px;
  width: 100%;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.success-icon {
  margin-bottom: 24px;
}

.modal-content h2 {
  color: #333;
  margin: 0 0 16px 0;
  font-size: 28px;
}

.modal-content p {
  color: #666;
  margin: 0 0 24px 0;
  line-height: 1.5;
}

.success-info {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.success-info p {
  margin: 8px 0;
  font-size: 14px;
}

.modal-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.primary-btn,
.secondary-btn {
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
}

.primary-btn {
  background: linear-gradient(135deg, #4caf50, #45a049);
  color: white;
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.3);
}

.secondary-btn {
  background: #f5f5f5;
  color: #666;
}

.secondary-btn:hover {
  background: #e0e0e0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 24px;
  }
  
  .benefits-section,
  .features-section,
  .payment-section {
    padding: 20px;
  }
  
  .modal-actions {
    flex-direction: column;
  }
  
  .primary-btn,
  .secondary-btn {
    width: 100%;
  }
}
</style>